<%--
  Created by IntelliJ IDEA.
  User: 33669
  Date: 2021/9/11
  Time: 14:16
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script src="js/jquery-3.6.0.min.js"></script>
    <script>
        $(function () {
            //页面加载时从数据库表中读取所有省的信息加载到第一个下拉列表中
            $.ajax({
                url:"city",
                data:{"method":"findCityByPid","pid":0},
                dataType:"json",
                type:"get",
                success:function (data) {
                    //将数据渲染到下拉列表框中
                    $(data).each(function (i,el) {
                        //创建下拉列表项
                        var op = '<option value="'+el.cid+'">'+el.cname+'</option>';
                        //添加到下拉列表框
                        $('[name="province"]').append(op);
                    })

                }
            })
            //将第一个默认省份的市区也默认显示出来
            $.ajax({
                url:"city",
                data:{"method":"findCityByPid","pid":1},//获取他的pid值即可
                dataType:"json",
                type:"get",
                success:function (data) {
                    //将数据渲染到下拉列表框中
                    $(data).each(function (i,el) {
                        //创建下拉列表项
                        var op = '<option value="'+el.cid+'">'+el.cname+'</option>';
                        //添加到下拉列表框
                        $('[name="province"]').append(op);
                    })

                }
            })

            //第一个省的下拉列表框绑定内容改变事件
            $('[name="province"]').change(function () {
                //清空市下拉列表框
                $('[name="city"]').empty();
                //获取当前选择的省的cid号
                var pid = $(this).val();
                //请求服务器查询
                $.ajax({
                    url:"city",
                    data:{"method":"findCityByPid","pid":pid},
                    dataType:"json",
                    type:"get",
                    success:function (data) {
                        console.log(data);
                        //将数据渲染到下拉列表框中
                        $(data).each(function (i,el) {
                            //创建下拉列表项
                            var op = '<option value="'+el.cid+'">'+el.cname+'</option>';
                            //添加到下拉列表框
                            $('[name="city"]').append(op);
                        })

                    }
                })

            })
        })
    </script>
</head>
<body>

    <select name="province">

    </select>
    省
    <select name="city">

    </select>
    市
</body>
</html>
